import React, { useEffect, useState } from "react";
import axios from "axios";
import ListItem from "../../components/listItem";
import { useSelector, useDispatch } from 'react-redux'
import { RootState } from '../../store'
import { setListActionCreator } from '../../store/home/homeAction'
import { Button, Popup, Cell, Stepper } from 'react-vant'
import { ListItem as ListItemState } from '../../store/home/homeReducer'
import { addCarAction } from '../../store/car/carAction'
import { useNavigate } from "react-router-dom";
const Index: React.FC = () => {
	const list = useSelector((state: RootState) => state.home.list)
	const dispatch = useDispatch()
  const navigate = useNavigate()
  const addCar = (v: ListItemState) => {
    dispatch(addCarAction(v))
  }
 

  useEffect(() => {
    const fetchData = async () => {
      const resp = await axios.get("/api/list");
			// 设置仓库数据
			dispatch(setListActionCreator(resp.data.data))
    };
    fetchData();
  }, []);

  return (
    <div>
      <div className="list">
        {list.map((v) => {
          return (
            <ListItem
              id={v.id}
              price={v.price}
              title={v.title}
              desc={v.desc}
              url={v.url}
              key={v.id}
              onClick={ () => navigate('/detail/' + v.id) }
            >
              <Button size="mini" onClick={(e) => { e.stopPropagation(); addCar(v); }}>加入购物车</Button>
            </ListItem>
          );
        })}


       
      </div>
    </div>
  );
};

export default Index;
